<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物家政服务 - 首页</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/home.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link active">首页</a>
                <a href="services.html" class="nav-link">服务预约</a>
                <a href="orders.html" class="nav-link">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-outline">登录</a>
                <a href="register.html" class="btn btn-primary">注册</a>
            </div>
        </div>
    </header>

    <main class="main">
        <!-- 轮播图区域 -->
        <section class="hero">
            <div class="hero-slide active" style="background-image: url('images/slide1.jpg')"></div>
            <div class="hero-slide" style="background-image: url('images/slide2.jpg')"></div>
            <div class="hero-slide" style="background-image: url('images/slide3.jpg')"></div>
            <div class="hero-content">
                <h1>专业的宠物家政服务</h1>
                <p>为您的爱宠提供贴心、专业的全方位服务</p>
                <a href="services.html" class="btn btn-primary btn-large">立即预约</a>
            </div>
            <div class="hero-nav">
                <div class="hero-nav-dot active"></div>
                <div class="hero-nav-dot"></div>
                <div class="hero-nav-dot"></div>
            </div>
        </section>

        <!-- 服务类型展示 -->
        <section class="services-section">
            <div class="container">
                <h2 class="section-title">我们的服务</h2>
                <div class="services-grid">
                    <!-- 服务列表将由JavaScript动态加载 -->
                </div>
            </div>
        </section>

        <!-- 特色介绍 -->
        <section class="features-section">
            <div class="container">
                <h2 class="section-title">为什么选择我们</h2>
                <div class="features-grid">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-certificate"></i>
                        </div>
                        <h3>专业认证</h3>
                        <p>所有服务人员均经过专业培训认证</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h3>准时服务</h3>
                        <p>严格按照预约时间提供服务</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3>安全保障</h3>
                        <p>全程保险保障，让您无后顾之忧</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="fas fa-smile"></i>
                        </div>
                        <h3>满意保证</h3>
                        <p>服务不满意，全额退款</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-phone"></i> 400-123-4567</p>
                    <p><i class="fas fa-envelope"></i> service@petcare.com</p>
                </div>
                <div class="footer-section">
                    <h3>服务时间</h3>
                    <p>周一至周日 8:00-20:00</p>
                    <p>24小时在线客服</p>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 宠物家政服务. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 轮播图控制
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelectorAll('.hero-slide');
            const dots = document.querySelectorAll('.hero-nav-dot');
            let currentSlide = 0;
            const slideInterval = 5000; // 5秒切换一次

            function showSlide(index) {
                // 移除所有活动状态
                slides.forEach(slide => slide.classList.remove('active'));
                dots.forEach(dot => dot.classList.remove('active'));
                
                // 设置当前活动状态
                slides[index].classList.add('active');
                dots[index].classList.add('active');
            }

            function nextSlide() {
                currentSlide = (currentSlide + 1) % slides.length;
                showSlide(currentSlide);
            }

            // 点击导航点切换轮播图
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    currentSlide = index;
                    showSlide(currentSlide);
                });
            });

            // 自动轮播
            let slideTimer = setInterval(nextSlide, slideInterval);

            // 鼠标悬停时暂停轮播
            const hero = document.querySelector('.hero');
            hero.addEventListener('mouseenter', () => {
                clearInterval(slideTimer);
            });

            hero.addEventListener('mouseleave', () => {
                slideTimer = setInterval(nextSlide, slideInterval);
            });
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const serviceUrlMap = {
                '宠物日常护理': 'service-daily.html',
                '宠物美容': 'service-grooming.html',
                '宠物训练': 'service-training.html',
                '宠物寄养': 'service-boarding.html',
                '宠物医疗': 'service-medical.html',
                '宠物用品代购': 'service-shopping.html',
            };
            const serviceIconMap = {
                '宠物日常护理': 'fas fa-bath',
                '宠物美容': 'fas fa-cut',
                '宠物训练': 'fas fa-graduation-cap',
                '宠物寄养': 'fas fa-home',
                '宠物医疗': 'fas fa-heartbeat',
                '宠物用品代购': 'fas fa-shopping-cart'
            };

            async function renderServices() {
                const servicesGrid = document.querySelector('.services-grid');
                if (!servicesGrid) {
                    return;
                }

                try {
                    const response = await petHouseAPI.services.getAll();
                    const services = response.data;
                    
                    if (!services || !Array.isArray(services) || services.length === 0) {
                        servicesGrid.innerHTML = '<p>暂无服务项目。</p>';
                        return;
                    }

                    servicesGrid.innerHTML = '';

                    services.forEach(service => {
                        // 打印服务名称，方便调试
                        console.log(`从后端获取的服务: name='${service.name}', id=${service.id}`);
                        const card = document.createElement('div');
                        card.className = 'service-card';
                        const url = serviceUrlMap[service.name] || 'services.html';
                        card.setAttribute('onclick', `location.href='${url}'`);
                        let priceDisplay = `¥${service.basePrice}起`;
                        if (service.name === '宠物用品代购') {
                            priceDisplay = '免费代购';
                        } else if (service.name === '宠物寄养') {
                            priceDisplay = `¥${service.basePrice}/天`;
                        }
                        const iconClass = serviceIconMap[service.name] || service.logo || 'fas fa-paw';
                        card.innerHTML = `
                            <div class="service-icon">
                                <i class="${iconClass}"></i>
                            </div>
                            <h3>${service.name}</h3>
                            <p>${service.description}</p>
                            <div class="service-price">${priceDisplay}</div>
                        `;
                        servicesGrid.appendChild(card);
                    });
                } catch (error) {
                    console.error('无法加载服务项目:', error);
                    servicesGrid.innerHTML = '<p>服务项目加载失败，请稍后重试。</p>';
                }
            }

            renderServices();
        });
    </script>
</body>
</html> 